{% load static %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
    <script src="{% static 'js/jquery.js' %}"></script>
    <style>
        .avatar {
            width: 80px;
            height: 80px;
            margin-left: 10px;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h1 class="text-center">注册</h1>
            <form action="" id="myform">    <!--不用form表单提交提交数据，只是单纯的用一下form标签而已-->
                {% csrf_token %}
                {% for form in form_obj %}
                    <div class="form-group">
                        <label for="{{ form.auto_id }}">{{ form.label }}</label>
                        {{ form }}
                    <span style="color: red;" class="pull-right">{{ form.errors.0 }}</span>
                    </div>
                {% endfor %}
                <div class="form-group">
                    <label for="myfile">头像
                        <img src="{% static 'img/default.png' %}" alt="" class="avatar">
                    </label>
                    <input type="file" id="myfile" name="avatar" style="display: none;">
                </div>

                <input type="button" class="btn btn-primary pull-right" value="注册" id="id_commit">
            </form>

        </div>
    </div>
</div>
<script>
    $('#myfile').change(function() {
        // 利用文件阅读器对象
        // 1.先生成一个文件阅读器对象
        let myFileReaderObj = new FileReader()
        // 获取用户上传的文件头像
        let fileObj = $(this)[0].files[0];
        // 将文件对象交给阅读器读取
        myFileReaderObj.readAsDataURL(fileObj);  // 文件读取-->异步操作  同时也是IO操作
        // 利用文件阅读器将文件展示在前端页面  修改src属性
        // 等待文件阅读区加载完毕再执行
        myFileReaderObj.onload = function() {
            console.log(myFileReaderObj.result);
            $('.avatar').attr('src', myFileReaderObj.result);
        }

    });

    $('#id_commit').click(function() {
        let formDataObj = new FormData();
        // console.log($('#myform').serializeArray())  // [{…}, {…}, {…}, {…}, {…}] 只包含普通键值对 不含文件对象
        $.each($('#myform').serializeArray(), function(index, obj) {
            formDataObj.append(obj.name, obj.value);
        });
        formDataObj.append('avatar', $('#myfile')[0].files[0]);

        $.ajax({
            url: '{% url 'register' %}',
            type: 'post',
            data:formDataObj,
            contentType: false,
            processData: false,
            success: function(args) {
                if (args.code === 1000) {
                    // 跳转到登录页面
                    window.location.href = args.url;
                } else {
                    console.log(args.msg);
                    /*
                    {username: Array(1), password: Array(1), confirm_password: Array(1), email: Array(1)}
                    confirm_password: ["确认密码不能为空"]
                    email: ["邮箱不能为空"]
                    password: ["密码不能为空"]
                    username: ["用户名不能为空"]
                    __proto__: Object
                    */
                    // 如何将对应的错误提示展示到对应的input框
                    $.each(args.msg, function(index, obj) {
                        console.log(index, obj);
                        let targetId = '#id_' + index;
                        $(targetId).next().text(obj[0]).parent().addClass('has-error');
                    });
                }
            }
        });
    });
    // 给所有的input框绑定获取焦点事件
    $('input').focus(function() {
        $(this).next('span').text('').parent().removeClass('has-error');
    })
</script>
</body>
</html>